<template>
  <div>
    <div class="content">
        <div class="topss">
            限时购
            <div class="time">
                <span>
                    <van-count-down :time="time" />
                </span>
                <span>后结束</span>
            </div>
            <div class="right">
                更多
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="center">
            <div class="box" v-for="(v,index) in imgs" :key="index">
                <img :src="v" alt="">
                <p>{{text[index]}}</p>
                <span class="span">￥{{ money[index] }}</span>
                <del>￥{{ befor[index] }}</del>
                
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgs: [],
            befor: [],
            money: [],
            text:[],
            time: 30 * 60 * 60 * 1000
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/Timelimit"
        }).then(res => {
            this.imgs = res.data[0].data.timeimg
            this.befor=res.data[0].data.befor
            this.money = res.data[0].data.hotmoney
            this.text = res.data[0].data.timetext
        })
    }

}
</script>

<style  scoped>
.van-count-down{
    color: red;
    font-size: 5vw;
}
.content{
    background-color: #fdeaea;
    width: 95vw;
    height: 50vw;
    margin: auto;
    margin-top: 4vw;
    border-radius: 3vw;
    padding-top: 2vw;
}
.topss{
    display: flex;
    text-indent: 4vw;
    color: black;         
}
.time{
    width: 60vw;
    color: red;
    display: flex;           
}
.time span{
    color:  #bbb1b6;
}
.right{
    text-indent: 0;
    color: #bbb1b6;
}
.center{
    width: 95vw;
    height: 43vw;
    display: flex;
    overflow: scroll;
}
    
.span{
    margin-top: -5vw;
    color: red;
}
.box{
    width: 22vw;
    height: 39vw;
    margin-top: 2vw;
    background-color: #ffffff;
    margin-left: 1.5vw;
    border-radius: 1vw;
}
.box img{
    width: 20vw;
    padding: 1vw;
}
.box p{
    font-size: 2vw;
    margin-top: -1.5vw;
    color: #8d939c;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.box del{
    color: #8d939c;
    display: block;
    font-size: 2vw;
}
</style>